<template>
  <div class="wrap">
    <x-header title="提现"></x-header>
    <div class="wrapper" ref="wrapper">
        <ul class="content">
          <group title="转账" label-width="5.5em" label-margin-right="2em" label-align="justify">
            <x-input title="提现金额" v-model.number="postForm.amount"></x-input>
            <x-button type="primary" action-type="button" @click.native="sure">确认</x-button>
          </group>
          <group title="提现明细">
            <selector ref="defaultValueRef" @on-change="change" direction="left" title="选择时间" :options="list" v-model="selMonth"></selector>
            <li v-for="item in fList" :key="item.id">
              <p class="p1"><span>{{item.bank}}</span><span :class="['info','','success','danger'][item.withdrawState]">{{ ['待审核','待转账','已完成','未通过'][item.withdrawState] }}</span><span>{{item.amount}}</span></p>
              <p class="p2"><span>创建时间:{{item.creationTime | moment}}</span><span>审核时间:{{item.auditTime}}</span><span>到账时间:{{item.paymentTime}}</span></p>
            </li>
          </group>
        </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Selector, XHeader, Group, XTextarea, XInput, XButton } from 'vux'
import { GetWithdrawCashPageList, Create } from '@/api/withdrawCash'
import { Toast } from 'mint-ui'
import moment from 'moment'

export default {
  components: {
    XHeader,
    Group,
    XInput,
    XButton,
    XTextarea,
    Selector
  },
  data() {
    return {
      postForm: {
        amount: 0
      },
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 10000,
        startDate: '',
        endDate: ''
      },
      fList: [{}],
      selMonth: '',
      monthList: []
    }
  },
  methods: {
    setMonth() {
      var mt = moment('2018-04-01')
      do {
        this.monthList.unshift(mt.format('YYYY-MM'))
        mt = mt.add(1, 'months')
      } while (mt.isBefore(new Date()))
      this.selMonth = this.monthList[0]
    },
    sure() {
      var _this = this
      Create(_this.postForm).then(result => {
        Toast('提现成功')
        _this.postForm.amount = 0
        _this.getList()
      })
    },
    change() {
      this.getList()
    },
    getList() {
      var _this = this
      _this.q.startDate = _this.selMonth + '-01'
      _this.q.endDate = moment(_this.q.startDate).add(1, 'months').format('YYYY-MM-DD')
      GetWithdrawCashPageList(_this.q).then(result => {
        _this.fList = result.data.items
      })
    }
  },
  mounted() {
    // 滚动
    this.scroll = new BScroll(this.$refs.wrapper, { click: true })
  },
  created() {
    this.setMonth()
    this.getList()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wrap{
  height: 100%;
  .vux-header{
    z-index: 2;
  }
  .wrapper{
    height: calc(100% - 58px);
    border-top: 1px solid #ffffff;
    .content{
      button.weui-btn{
        width: 80%;
        margin: 20px auto;
      }
      li{
        padding: 5px 15px;
        border-bottom: 1px solid #dddddd;
        p{
          span{
            display: inline-block;
            width: 32%;
            text-align: left;
            font-size: 14px;
          }
        }
        .p1{
          span:nth-child(2){
            display: inline-block;
            width: 15%;
            text-align: center;
            padding: 0 10px;
            // height: 32px;
            font-size: 12px;
            color: #409eff;
            border-radius: 4px;
            border: 1px solid rgba(64,158,255,.2);
            white-space: nowrap;
          }
          span:nth-child(3){
            margin-left: 12%;
          }
          .info{
            background-color: rgba(103,194,58,.1);
            border-color: rgba(103,194,58,.2);
            color: #67c23a;
          }
          .success{
            background-color: rgba(64,158,255,.1);
            color: #409eff;
            border: 1px solid rgba(64,158,255,.2);
          }
          .danger{
            background-color: hsla(0,87%,69%,.1);
            border-color: hsla(0,87%,69%,.2);
            color: #f56c6c;
          }
        }
        .p2{
          span{
            color: #aaaaaa;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
